/**
 * Created by GYL on 2018/7/25
 */
import React, { Component } from 'react';
import { Row, Col, Tabs, Card, InputNumber, Tag, Popover } from 'antd';
import Container from '../../components/common/Container';
import MyTable from '../../components/common/MyTable';
import PublicService from '../../services/PublicService';
import request from '../../utils/request';
import moment from 'moment';
import style from './RepDetails.less';
const TabPane = Tabs.TabPane;
var dataSource1 = [

]
class RepDetails extends Component {
    constructor(props) {
        super(props)
      

    }
    state = {
        loading: false,
        gasStationId: PublicService.getCookie("RepPanId"),
        takeTime: PublicService.getCookie("RepPanTime"),
        selectedRowKeys: [],
        selectedRows: [],
        dataSource: [],
        pageIndex: 1,
        pageSize: 10,
        jq116: "",
        jq145: "",
        jq500: "",
        name: "",
        sc116: "",
        sc145: "",
        sc500: "",
        enterprise:"",
        takeTime: "",
        xs116: "",
        xs145: "",
        xs500: "",
        tabKey: 1,
        columns : [
            {
                title: '序号',
                dataIndex: 'num',
                width: '5%',
                align: "center",
                key: "1"
            },
            {
                title: '时间',
                dataIndex: 'takeTime',
                width: '15%',
                align: "center",
                key: "2",
            },
            {
                title: '燃气站点',
                dataIndex: 'standName',
                width: '15%',
                key: "3",
                align: "center",
            },
            {
                title: '11.6Kg进气量/瓶',
                dataIndex: 'number116',
                width: '10%',
                key: "4",
                align: "center",

            },
            {
                title: '14.5Kg进气量/瓶',
                width: '10%',
                dataIndex: 'number145',
                align: "center",
                key: "5",

            },
            {
                title: '50Kg进气量/瓶',
                dataIndex: 'number500',
                width: '10%',
                align: "center",
                key: "6"
            },
            {
                title: '记录人',
                dataIndex: 'recorder',
                width: '17%',
                align: "center",
                key: "7"
            },

        ]
    }
    componentDidMount() {


        let data = {
            gasStationId: PublicService.getCookie("RepPanId"),
            takeTime: PublicService.getCookie("RepPanTime")
        }
        request({
            url: `/zhrq-web/gas/gaspandect/getParticulars`,
            method: 'POST',
            data: data
        }).then(data => {
            console.log(data)
            if (data.rc == 0) {
                const { jq145, jq500, name, sc116, sc145, sc500, takeTime, xs116, xs145, xs500 ,jq116,enterprise} = data.ret
                this.setState({
                    jq145, jq500, name, sc116, sc145, sc500, takeTime, xs116, xs145, xs500,jq116,enterprise
                })
            }
        })

        //查询进气台账
        this.onJqSave(1, 10)
    }

    onA = () => {
        this.props.history.goBack()
    }

    //查询进气台账
    onJqSave = (page, rows) => {
        let data = {
            page, rows,
            gasStationId: PublicService.getCookie("RepPanId"),
            takeTime: PublicService.getCookie("RepPanTime")
        }
        request({
            url: `/zhrq-web/gas/gaspandect/getParticularsEnter`,
            method: 'POST',
            data: data
        }).then(data => {
            console.log(data)
            if (data.rc === 0) {
                data.ret.items.forEach(item => {
                    item.takeTime = moment(item.takeTime).format("YYYY-MM-DD HH:mm")
                });
                this.setState({
                    dataSource: data.ret.items
                })
            }
        })

    }

    //查询销售台账
    onXsSave = (page, rows) => {
        let data = {
            page, rows,
            gasStationId: PublicService.getCookie("RepPanId"),
            takeTime: PublicService.getCookie("RepPanTime")
        }
        request({
            url: `/zhrq-web/gas/gaspandect/getParticularsCome`,
            method: 'POST',
            data: data
        }).then(data => {
            console.log(data)
            if (data.rc === 0) {
                data.ret.items.forEach(item => {
                    item.takeTime = moment(item.takeTime).format("YYYY-MM-DD HH:mm")
                });
                this.setState({
                    dataSource: data.ret.items
                })
            }
        })
    }

    //切换面板
    ontabs = (v) => {
        console.log(v)

        if (v == 1) {
            this.onJqSave(1, 10)
            this.setState({
                columns : [
                    {
                        title: '序号',
                        dataIndex: 'num',
                        width: '5%',
                        align: "center",
                        key: "1"
                    },
                    {
                        title: '时间',
                        dataIndex: 'takeTime',
                        width: '15%',
                        align: "center",
                        key: "2",
                    },
                    {
                        title: '燃气站点',
                        dataIndex: 'standName',
                        width: '15%',
                        key: "3",
                        align: "center",
                    },
                    {
                        title: '11.6Kg进气量/瓶',
                        dataIndex: 'number116',
                        width: '10%',
                        key: "4",
                        align: "center",
        
                    },
                    {
                        title: '14.5Kg进气量/瓶',
                        width: '10%',
                        dataIndex: 'number145',
                        align: "center",
                        key: "5",
        
                    },
                    {
                        title: '50Kg进气量/瓶',
                        dataIndex: 'number500',
                        width: '10%',
                        align: "center",
                        key: "6"
                    },
                    {
                        title: '记录人',
                        dataIndex: 'recorder',
                        width: '17%',
                        align: "center",
                        key: "7"
                    },
        
                ]
            })
        }

        if (v == 2) {
            this.onXsSave(1, 10)
            this.setState({
                columns : [
                    {
                        title: '序号',
                        dataIndex: 'num',
                        width: '5%',
                        align: "center",
                        key: "1"
                    },
                    {
                        title: '时间',
                        dataIndex: 'takeTime',
                        width: '15%',
                        align: "center",
                        key: "2",
                    },
                    {
                        title: '燃气站点',
                        dataIndex: 'standName',
                        width: '15%',
                        key: "3",
                        align: "center",
                    },
                    {
                        title: '11.6Kg进气量/瓶',
                        dataIndex: 'number116',
                        width: '10%',
                        key: "4",
                        align: "center",
        
                    },
                    {
                        title: '14.5Kg进气量/瓶',
                        width: '10%',
                        dataIndex: 'number145',
                        align: "center",
                        key: "5",
        
                    },
                    {
                        title: '50Kg进气量/瓶',
                        dataIndex: 'number500',
                        width: '10%',
                        align: "center",
                        key: "6"
                    },
                    {
                        title: '用户名',
                        dataIndex: 'number500',
                        width: '10%',
                        align: "center",
                        key: "67"
                    },
                    {
                        title: '用户地址',
                        dataIndex: 'number500',
                        width: '10%',
                        align: "center",
                        key: "66"
                    },
                    {
                        title: '记录人',
                        dataIndex: 'recorder',
                        width: '17%',
                        align: "center",
                        key: "7"
                    },
        
                ]
            })
        }

        setTimeout(() => {
            this.setState({
                tabKey: v
            })
        },200);
       
    }
    render() {
        const { loading, selectedRowKeys, dataSource, pageIndex, pageSize, jq116,enterprise,
            jq145,
            jq500,
            name,
            sc116,
            sc145,
            sc500,
            takeTime,
            xs116,
            xs145,
            xs500 } = this.state
        const windowWidth = document.body.clientWidth;
        const columns = this.state.columns
        const height = document.body.clientHeight;
        let containerHeight = '88vh';
        if (windowWidth > 1367) {
            containerHeight = '88vh';
        }

        return (
            <div className={style.wrap}>
                <Container
                    style={{ height: containerHeight, position: "relative", marginTop: "1vh", padding: "0px 10px" }}
                    header={true}
                >
                    <Row>
                        <Col span={12}><a onClick={this.onA}>库存管理</a> >> 详情</Col>
                        <Col span={12}><a onClick={this.onA} style={{ float: "right" }}>返回</a></Col>
                    </Row>

                    <Row>
                    <Col span={4}>企业 : {enterprise}</Col>
                        <Col span={4}>燃气站点 : {name}</Col>
                        <Col span={4}>时间 : {takeTime}</Col>
                    </Row>

                    <Row>
                        <Col span={4}>上一工作日库存量</Col>
                        <Col span={4}>11.6Kg : <InputNumber value={sc116} size="small" disabled={true} /></Col>
                        <Col span={4}>14.5Kg : <InputNumber value={sc145} size="small" disabled={true} /></Col>
                        <Col span={4}>50Kg : <InputNumber value={sc500} size="small" disabled={true} /></Col>
                    </Row>
                    <Row>
                        <Col span={4}>当日进气量</Col>
                        <Col span={4}>11.6Kg : <InputNumber value={jq116} size="small" disabled={true} /></Col>
                        <Col span={4}>14.5Kg : <InputNumber value={jq145} size="small" disabled={true} /></Col>
                        <Col span={4}>50Kg : <InputNumber value={jq500} size="small" disabled={true} /></Col>
                    </Row>
                    <Row>
                        <Col span={4}>当日销售量</Col>
                        <Col span={4}>11.6Kg : <InputNumber value={xs116} size="small" disabled={true} /></Col>
                        <Col span={4}>14.5Kg : <InputNumber value={xs145} size="small" disabled={true} /></Col>
                        <Col span={4}>50Kg : <InputNumber value={xs500} size="small" disabled={true} /></Col>
                    </Row>


                    {
                        <Tabs onChange={this.ontabs}>
                            <TabPane tab="进气台账" key="1">
                                <Popover placement="bottomLeft" content={
                                    <div>
                                        <a>本页 ?</a><br />
                                        <a>全部 ?</a>
                                    </div>

                                } trigger="click">
                                    <Tag color="#108ee9">导出</Tag>
                                </Popover>
                                <MyTable
                                    // bordered
                                    loading={loading}
                                    columns={columns}
                                    // rowSelection={rowSelection}
                                    pagination={false}
                                    // scroll={{ y: windowWidth < 1400 ? height - 280 : height - 300 }}
                                    dataSource={PublicService.transformArrayData(dataSource, true, true, pageIndex, pageSize)}
                                />
                            </TabPane>
                            <TabPane tab="销售台账" key="2">
                                <Popover placement="bottomLeft" content={
                                    <div>
                                        <a>本页 ?</a><br />
                                        <a>全部 ?</a>
                                    </div>

                                } trigger="click">
                                    <Tag color="#108ee9">导出</Tag>
                                </Popover>
                                <MyTable
                                    // bordered
                                    loading={loading}
                                    columns={columns}
                                    // rowSelection={rowSelection}
                                    pagination={false}
                                    // scroll={{ y: windowWidth < 1400 ? height - 280 : height - 300 }}
                                    dataSource={PublicService.transformArrayData(dataSource, true, true, pageIndex, pageSize)}
                                />
                            </TabPane>
                        </Tabs>
                    }

                </Container>
            </div>
        )
    }
}
export default (RepDetails);
